<template>
  <div class="marketing-video-list">
    <div class="header">
      <h1>营销视频数字人合成列表</h1>
      <div class="header-actions">
        <el-button type="primary" @click="createNewVideo">
          <el-icon><Plus /></el-icon>
          创建新视频
        </el-button>
        <el-button type="primary" @click="refreshList" :loading="loading">
          <el-icon><Refresh /></el-icon>
          刷新列表
        </el-button>
      </div>
    </div>

    <!-- 视频列表 -->
    <div class="video-grid" v-loading="loading">
      <div 
        v-for="video in videoList" 
        :key="video.id" 
        class="video-card"
        :class="{ 'disabled': video.overall_status === 0 || video.overall_status === 1 }"
        @click="handleVideoClick(video)"
      >
        <div class="video-thumbnail">
          <video
            v-if="video.overall_status === 4 && video.finished_video_url"
            :src="video.finished_video_url"
            class="preview-video"
            preload="metadata"
            :controls="isPlaying[video.id]"
            @click.stop="toggleVideoPlay(video)"
            ref="videoRefs"
          ></video>
          <!-- 图片替换完成或失败时显示图片 -->
          <img
            v-else-if="(video.overall_status === 2 || video.overall_status === 5) && video.resultImage"
            :src="video.resultImage"
            class="preview-image"
            alt="生成结果图片"
          />
          <div v-else class="placeholder-thumbnail">
            <el-icon size="48"><VideoCamera /></el-icon>
          </div>
          <div class="status-badge" :class="video.status">
            {{ video.statusText }}
          </div>
          <!-- 播放按钮覆盖层，仅在视频未播放时显示 -->
          <div 
            v-if="video.overall_status === 4 && video.finished_video_url && !isPlaying[video.id]" 
            class="play-overlay"
            @click.stop="toggleVideoPlay(video)"
          >
            <el-icon size="48"><VideoPlay /></el-icon>
          </div>
        </div>
        
        <div class="video-info">
          <div class="video-meta">
            <span class="video-id">ID: {{ video.id }}</span>
            <span class="create-time">{{ formatTime(video.createTime) }}</span>
            <span v-if="video.duration" class="duration">{{ formatDuration(video.duration) }}</span>
          </div>
          <!-- 失败原因直接展示 -->
          <div v-if="video.overall_status === 5 && video.errorMessage" class="error-reason">
            <el-icon size="16" color="#f56c6c"><Warning /></el-icon>
            <span class="error-text">{{ video.errorMessage }}</span>
          </div>
        </div>

        <div class="video-actions">
          <el-button 
            v-if="video.overall_status === 1" 
            type="primary" 
            size="small"
            disabled
          >
            图片替换中...
          </el-button>
          <el-button 
            v-if="video.overall_status === 2" 
            type="primary" 
            size="small"
          >
            继续编辑
          </el-button>
          <el-button 
            v-if="video.overall_status === 3" 
            type="primary" 
            size="small"
            disabled
          >
            生成中...
          </el-button>
          <el-button 
            v-if="video.overall_status === 4" 
            type="primary" 
            size="small"
            @click.stop="handleVideoClick(video)"
          >
            下载视频
          </el-button>
          
        </div>
      </div>

      <!-- 空状态 -->
      <div v-if="!loading && videoList.length === 0" class="empty-state">
        <el-icon size="64"><VideoCamera /></el-icon>
        <h3>暂无视频</h3>
        <p>点击"创建新视频"开始制作您的第一个营销视频</p>
        <el-button type="primary" @click="createNewVideo">
          <el-icon><Plus /></el-icon>
          创建新视频
        </el-button>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination" v-if="total > 0">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[12, 24, 48]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 详情弹窗 -->
    <el-dialog 
      v-model="showDetailDialog" 
      title="视频详情" 
      width="600px"
    >
      <div v-if="detailVideo" class="video-detail">
        <div class="detail-item">
          <label>标题：</label>
          <span>{{ detailVideo.title || '营销视频' }}</span>
        </div>
        <div class="detail-item">
          <label>状态：</label>
          <el-tag :type="getStatusType(detailVideo.status)">
            {{ detailVideo.statusText }}
          </el-tag>
        </div>
        <div class="detail-item">
          <label>创建时间：</label>
          <span>{{ formatTime(detailVideo.createTime) }}</span>
        </div>
        <div v-if="detailVideo.duration" class="detail-item">
          <label>时长：</label>
          <span>{{ formatDuration(detailVideo.duration) }}</span>
        </div>
        <div class="detail-item">
          <label>脚本内容：</label>
          <div class="script-content">{{ detailVideo.scriptText }}</div>
        </div>
        <div v-if="detailVideo.errorMessage" class="detail-item">
          <label>错误信息：</label>
          <div class="error-message">{{ detailVideo.errorMessage }}</div>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script setup>
import { ref, onMounted, computed, onUnmounted } from 'vue'
import { Plus, VideoCamera, VideoPlay, More, Refresh, Warning } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import { apiRequest } from '../../config/api.js'

const router = useRouter()

// 数据
const loading = ref(false)
const videoList = ref([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(12)
const showDetailDialog = ref(false)
const detailVideo = ref(null)

// 视频播放状态
const isPlaying = ref({})
const videoRefs = ref([])

// 获取视频列表
const getVideoList = async () => {
  console.log('开始获取营销视频列表...')
  loading.value = true
  try {
    const params = new URLSearchParams({
      page: String(currentPage.value),
      page_size: String(pageSize.value)
    })

    console.log('请求参数:', { page: currentPage.value, page_size: pageSize.value })

    const response = await apiRequest(`/productAvatar/task/list?${params.toString()}`, {
      method: 'GET'
    })

    console.log('API响应:', response)

    if (response.code === 200) {
      console.log('处理视频列表数据...')
      // 处理返回的数据
      videoList.value = response.data.list.map(item => {
        // 获取 result_images 中的第一个元素
        let productReplaceResultKey = null
        let resultImage = null
        
        if (item.result_images) {
          if (Array.isArray(item.result_images) && item.result_images.length > 0) {
            // 如果是数组，取第一个元素
            resultImage = item.result_images[0].url
            productReplaceResultKey = '0'
          }
        }

        return {
          id: item.id,
          taskId: item.id,
          title: item.task_name,
          overall_status: Number(item.overall_status),
          status: getTaskStatus(item.overall_status),
          statusText: item.overall_status_text,
          createTime: item.create_time,
          thumbnailUrl: item.preview_video_url,
          videoUrl: item.finished_video_url,
          finished_video_url: item.finished_video_url,
          resultImage: resultImage,
          productReplaceResultKey: productReplaceResultKey,
          scriptText: item.tts_text,
          errorMessage: item.video_error_msg || item.replace_error_msg
        }
      })
      total.value = response.data.pagination.total || 0
      console.log('视频列表处理完成:', { videoListLength: videoList.value.length, total: total.value })
    } else {
      console.error('获取视频列表失败:', response)
      ElMessage.error(response.message || '获取视频列表失败')
    }
  } catch (error) {
    console.error('获取视频列表失败:', error)
    ElMessage.error('获取视频列表失败')
  } finally {
    loading.value = false
  }
}

// 获取任务状态
const getTaskStatus = (status) => {
  const statusMap = {
    0: 'pending',    // 待处理
    1: 'processing', // 图片替换中
    3: 'processing', // 视频生成中
    4: 'completed',  // 已完成
    5: 'failed'      // 失败
  }
  return statusMap[status] || 'pending'
}

// 格式化时间
const formatTime = (time) => {
  if (!time) return '-'
  return new Date(time).toLocaleString('zh-CN')
}

// 格式化时长
const formatDuration = (duration) => {
  if (!duration) return '-'
  const minutes = Math.floor(duration / 60)
  const seconds = duration % 60
  return `${minutes}:${seconds.toString().padStart(2, '0')}`
}

// 获取状态类型
const getStatusType = (status) => {
  const typeMap = {
    pending: 'info',
    processing: 'warning',
    completed: 'success',
    failed: 'danger'
  }
  return typeMap[status] || 'info'
}

// 创建新视频
const createNewVideo = () => {
  router.push('/marketing-video/generate')
}

// 刷新列表
const refreshList = async () => {
  console.log('刷新营销视频列表...')
  ElMessage.success('正在刷新列表...')
  await getVideoList()
}


// 重试生成
const retryGenerate = async (video) => {
  try {
    const response = await apiRequest(`/marketingVideo/retry/${video.id}`, {
      method: 'POST'
    })

    if (response.code === 200) {
      ElMessage.success('重新生成任务已提交')
      getVideoList()
    } else {
      ElMessage.error(response.message || '重试失败')
    }
  } catch (error) {
    ElMessage.error('重试失败')
  }
}

// 处理下拉菜单命令
const handleDropdownCommand = (command) => {
  const [action, videoId] = command.split('_')
  const video = videoList.value.find(v => v.id === videoId)
  
  switch (action) {
    case 'detail':
      detailVideo.value = video
      showDetailDialog.value = true
      break
    case 'share':
      shareVideo(video)
      break
    case 'delete':
      deleteVideo(video)
      break
  }
}

// 分享视频
const shareVideo = (video) => {
  navigator.clipboard.writeText(video.videoUrl).then(() => {
    ElMessage.success('视频链接已复制到剪贴板')
  }).catch(() => {
    ElMessage.error('复制失败')
  })
}

// 删除视频
const deleteVideo = (video) => {
  ElMessageBox.confirm(
    '确定要删除这个视频吗？删除后无法恢复。',
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    try {
      const response = await apiRequest(`/marketingVideo/task/delete/${video.id}`, {
        method: 'DELETE'
      })

      if (response.code === 200) {
        ElMessage.success('删除成功')
        getVideoList()
      } else {
        ElMessage.error(response.message || '删除失败')
      }
    } catch (error) {
      ElMessage.error('删除失败')
    }
  }).catch(() => {})
}

// 分页相关
const handleSizeChange = (newSize) => {
  pageSize.value = newSize
  currentPage.value = 1
  getVideoList()
}

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage
  getVideoList()
}

// 页面加载时获取数据
onMounted(() => {
  console.log('营销视频列表页面已加载，开始获取数据...')
  getVideoList()

  // 监听视频播放结束
  const handleVideoEnd = (event) => {
    const videoElement = event.target
    const videoId = Object.keys(isPlaying.value).find(key => {
      return videoElement.src === videoList.value.find(v => v.id === key)?.finished_video_url
    })
    if (videoId) {
      isPlaying.value[videoId] = false
    }
  }

  // 添加视频结束事件监听
  document.addEventListener('ended', handleVideoEnd, true)

  // 组件卸载时移除事件监听
  onUnmounted(() => {
    document.removeEventListener('ended', handleVideoEnd, true)
  })
})

// 处理视频点击
const handleVideoClick = (video) => {
  // 检查任务状态
  if (video.overall_status === 0) {
    ElMessage.warning('请等待任务开始处理')
    return
  }
  
  if (video.overall_status === 1) {
    ElMessage.warning('正在替换产品图片，请稍后...')
    return
  }

  if (video.overall_status === 2) {
    // 图片生成完成，跳转到生成页面继续填写营销文案
    router.push({
      path: '/marketing-video/generate',
      query: {
        taskId: String(video.id),
        step: '2'
      }
    })
    return
  }

  if (video.overall_status === 3) {
    ElMessage.warning('视频正在生成中，请耐心等待')
    return
  }

  if (video.overall_status === 4) {
    // 视频生成完成，显示下载按钮
    if (video.videoUrl) {
      // 创建一个临时链接并触发下载
      const link = document.createElement('a')
      link.href = video.videoUrl
      link.download = `marketing_video_${video.id}.mp4`
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    } else {
      ElMessage.error('视频文件不存在')
    }
    return
  }

  if (video.overall_status === 5) {
    ElMessage.error('失败，请重新生成')
    return
  }

  // 使用完整的路径
  router.push({
    path: '/marketing-video/generate',
    query: {
      taskId: String(video.id), // 确保 taskId 是字符串
      step: '2'
    }
  })
}

// 切换视频播放状态
const toggleVideoPlay = (video) => {
  // 如果视频正在播放，停止播放
  if (isPlaying.value[video.id]) {
    const videoElements = document.querySelectorAll('video')
    videoElements.forEach(videoEl => {
      if (videoEl.src === video.finished_video_url) {
        videoEl.pause()
      }
    })
    isPlaying.value[video.id] = false
  } else {
    // 如果视频未播放，先停止其他所有视频
    const videoElements = document.querySelectorAll('video')
    videoElements.forEach(videoEl => {
      videoEl.pause()
    })
    // 重置所有视频的播放状态
    Object.keys(isPlaying.value).forEach(key => {
      isPlaying.value[key] = false
    })
    
    // 播放当前视频
    videoElements.forEach(videoEl => {
      if (videoEl.src === video.finished_video_url) {
        videoEl.play()
        isPlaying.value[video.id] = true
      }
    })
  }
}
</script>

<style scoped>
.marketing-video-list {
  min-height: 100vh;
  background: #18181c;
  padding: 24px;
  color: #fff;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.header h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  color: #fff;
}

.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.header-actions .el-button {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

/* 刷新按钮样式 - 蓝色主题 */
.header-actions .el-button:last-child {
  background: #409eff !important;
  border: 1px solid #409eff !important;
  color: #fff !important;
}

.header-actions .el-button:last-child:hover {
  background: #66b1ff !important;
  border-color: #66b1ff !important;
  color: #fff !important;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
  padding: 20px;
}

.video-card {
  background: #23232a;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid #2a2a2a;
  cursor: pointer;
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
}

.video-card:hover {
  transform: translateY(-4px);
  border-color: #409eff;
  box-shadow: 0 8px 32px rgba(64, 158, 255, 0.2);
}

.video-card.disabled {
  cursor: not-allowed;
  opacity: 0.8;
  pointer-events: none;
}

.video-card.disabled:hover {
  transform: none;
  border-color: #2a2a2a;
  box-shadow: none;
}

.video-thumbnail {
  position: relative;
  width: 100%;
  height: 200px;
  background: #18181c;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.video-thumbnail video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.placeholder-thumbnail {
  color: #909399;
}

.status-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.pending {
  background: rgba(144, 147, 153, 0.9);
  color: #fff;
}

.status-badge.processing {
  background: rgba(230, 162, 60, 0.9);
  color: #fff;
}

.status-badge.completed {
  background: rgba(103, 194, 58, 0.9);
  color: #fff;
}

.status-badge.failed {
  background: rgba(245, 108, 108, 0.9);
  color: #fff;
}

.play-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.video-thumbnail:hover .play-overlay {
  opacity: 1;
}

.play-overlay .el-icon {
  color: #fff;
  font-size: 48px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.progress-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-info {
  padding: 12px 16px 8px 16px;
}

.video-title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
  color: #909399;
}

.video-id {
  font-weight: 600;
  color: #409eff;
  font-size: 13px;
}

.video-description {
  font-size: 14px;
  color: #ccc;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-actions {
  padding: 8px 16px 12px 16px;
  border-top: 1px solid #2a2a2a;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 20px;
  color: #909399;
}

.empty-state h3 {
  margin: 16px 0 8px;
  font-size: 18px;
  color: #ccc;
}

.empty-state p {
  margin: 0 0 24px;
  font-size: 14px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 32px;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.video-preview-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background: #18181c;
  border-radius: 8px;
}

.preview-video {
  max-width: 100%;
  max-height: 60vh;
  border-radius: 4px;
}

.preview-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  background: #222;
}

.video-detail {
  color: #fff;
}

.detail-item {
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.detail-item label {
  min-width: 80px;
  color: #909399;
  font-weight: 500;
}

.script-content {
  flex: 1;
  padding: 12px;
  background: #18181c;
  border-radius: 8px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.error-message {
  flex: 1;
  padding: 12px;
  background: rgba(245, 108, 108, 0.1);
  border: 1px solid rgba(245, 108, 108, 0.3);
  border-radius: 8px;
  color: #f56c6c;
}

:deep(.el-button) {
  background: #23232a !important;
  border-color: #2a2a2a !important;
}

:deep(.el-button:hover) {
  background: #2a2a2a !important;
  border-color: #409eff !important;
}

:deep(.el-button--primary) {
  background: #409eff !important;
  border-color: #409eff !important;
}

:deep(.el-button--primary:hover) {
  background: #66b1ff !important;
  border-color: #66b1ff !important;
}

:deep(.el-select) {
  background: #23232a !important;
}

:deep(.el-select .el-input__inner) {
  background: #23232a !important;
  border-color: #2a2a2a !important;
  color: #fff !important;
}

:deep(.el-select .el-input__wrapper) {
  background: #23232a !important;
  box-shadow: 0 0 0 1px #2a2a2a !important;
}

:deep(.el-select .el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #409eff !important;
}

:deep(.el-select-dropdown) {
  background: #23232a !important;
  border: 1px solid #2a2a2a !important;
}

:deep(.el-select-dropdown__item) {
  color: #fff !important;
}

:deep(.el-select-dropdown__item.hover) {
  background: #2a2a2a !important;
}

:deep(.el-select-dropdown__item.selected) {
  background: #2a2a2a !important;
  color: #409eff !important;
}

:deep(.el-date-editor) {
  background: #23232a !important;
}

:deep(.el-date-editor .el-input__wrapper) {
  background: #23232a !important;
  box-shadow: 0 0 0 1px #2a2a2a !important;
}

:deep(.el-date-editor .el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #409eff !important;
}

:deep(.el-date-editor .el-range-input) {
  color: #fff !important;
  background: transparent !important;
}

:deep(.el-date-editor .el-range-separator) {
  color: #909399 !important;
}

:deep(.el-picker__popper) {
  background: #23232a !important;
  border: 1px solid #2a2a2a !important;
}

:deep(.el-date-table th) {
  color: #909399 !important;
  border-bottom: 1px solid #2a2a2a !important;
}

:deep(.el-date-table td.available:hover) {
  color: #409eff !important;
}

:deep(.el-date-table td.current:not(.disabled)) {
  background: #409eff !important;
  color: #fff !important;
}

:deep(.el-date-table td) {
  color: #fff !important;
}

:deep(.el-date-table td.prev-month),
:deep(.el-date-table td.next-month) {
  color: #606266 !important;
}

:deep(.el-pagination) {
  --el-pagination-bg-color: #23232a;
  --el-pagination-hover-color: #409eff;
  --el-text-color-regular: #fff;
  --el-disabled-bg-color: #1a1a1a;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

:deep(.el-pagination .btn-prev),
:deep(.el-pagination .btn-next) {
  background: #23232a !important;
  color: #fff !important;
}

:deep(.el-pagination .el-pager li) {
  background: #23232a !important;
  color: #fff !important;
  border: none !important;
}

:deep(.el-pagination .el-pager li:hover) {
  color: #409eff !important;
}

:deep(.el-pagination .el-pager li.is-active) {
  background: #409eff !important;
  color: #fff !important;
  border-color: #409eff !important;
}

:deep(.el-pagination .el-pagination__total),
:deep(.el-pagination .el-pagination__jump) {
  color: #909399 !important;
}

:deep(.el-pagination .el-input__wrapper) {
  background: #23232a !important;
  box-shadow: none !important;
  border: none !important;
}

:deep(.el-pagination .el-input__inner) {
  color: #fff !important;
}

:deep(.el-select-dropdown__empty) {
  color: #909399 !important;
  padding: 10px 0;
}

:deep(.el-picker-panel) {
  color: #fff !important;
}

:deep(.el-picker-panel__icon-btn) {
  color: #fff !important;
}

:deep(.el-picker-panel__content) {
  background: #23232a !important;
}

:deep(.el-month-table td .cell) {
  color: #fff !important;
}

:deep(.el-month-table td.current:not(.disabled) .cell) {
  color: #409eff !important;
}

:deep(.el-year-table td .cell) {
  color: #fff !important;
}

:deep(.el-year-table td.current:not(.disabled) .cell) {
  color: #409eff !important;
}

.preview-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.preview-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-dialog :deep(.el-dialog) {
  background: #23232a !important;
  border: 1px solid #2a2a2a !important;
}

.preview-dialog :deep(.el-dialog__header) {
  border-bottom: 1px solid #2a2a2a !important;
}

.preview-dialog :deep(.el-dialog__title) {
  color: #fff !important;
}

/* 添加视频控制器的样式 */
.video-thumbnail video::-webkit-media-controls-panel {
  background: rgba(0, 0, 0, 0.6);
}

.video-thumbnail video::-webkit-media-controls-timeline {
  display: none; /* 隐藏进度条，简化控制器 */
}

/* 每页数量选择器样式 - 加强覆盖 */
:deep(.el-pagination .el-select) {
  background: #23232a !important;
}

:deep(.el-pagination .el-select .el-input) {
  background: #23232a !important;
}

:deep(.el-pagination .el-select .el-input__wrapper) {
  background: #23232a !important;
  box-shadow: none !important;
  border: none !important;
}

:deep(.el-pagination .el-select .el-input__inner) {
  background: #23232a !important;
  color: #fff !important;
  border: none !important;
}

:deep(.el-pagination .el-select .el-select__caret) {
  color: #909399 !important;
}

/* 针对每页数量选择的下拉框 */
:deep(.el-pagination__sizes .el-select) {
  background: #23232a !important;
}

:deep(.el-pagination__sizes .el-select .el-input__wrapper) {
  background: #23232a !important;
  box-shadow: none !important;
  border: none !important;
}

:deep(.el-pagination__sizes .el-select .el-input__inner) {
  background: #23232a !important;
  color: #fff !important;
}

/* 强制覆盖所有分页组件内的选择器背景 */
:deep(.pagination .el-select),
:deep(.pagination .el-select *),
:deep(.el-pagination .el-select),
:deep(.el-pagination .el-select *) {
  background: #23232a !important;
  background-color: #23232a !important;
  color: #fff !important;
}

/* 强制覆盖所有输入框背景 */
:deep(.pagination .el-input),
:deep(.pagination .el-input *),
:deep(.el-pagination .el-input),
:deep(.el-pagination .el-input *) {
  background: #23232a !important;
  background-color: #23232a !important;
  color: #fff !important;
}

/* 最强力覆盖 - 包括所有状态 */
:deep(.el-pagination),
:deep(.el-pagination *),
:deep(.el-pagination) input,
:deep(.el-pagination) input:focus,
:deep(.el-pagination) input:hover,
:deep(.el-pagination) .el-input__inner,
:deep(.el-pagination) .el-input__wrapper,
:deep(.el-pagination) .el-select,
:deep(.el-pagination) .el-select .el-input,
:deep(.el-pagination) .el-select .el-input__inner,
:deep(.el-pagination) .el-select .el-input__wrapper,
:deep(.pagination),
:deep(.pagination *),
:deep(.pagination .el-pagination),
:deep(.pagination .el-pagination *) {
  background: #23232a !important;
  background-color: #23232a !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 额外确保没有任何边框 */
:deep(.pagination .el-pagination) {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

:deep(.pagination .el-pagination *) {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}


/* 错误原因直接展示样式 */
.error-reason {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
  margin-bottom: 0;
  padding: 8px 10px;
  background: #2a1a1a;
  border: 1px solid #f56c6c;
  border-radius: 4px;
  border-left: 3px solid #f56c6c;
}

.error-text {
  color: #f56c6c;
  font-size: 12px;
  line-height: 1.3;
  word-break: break-all;
  white-space: pre-wrap;
  flex: 1;
  margin: 0;
}
</style> 